import Phaser from 'phaser'

const standardHeight = 150
export default class GameState extends Phaser.State {
  init(...args) {
    console.log('ce---启动游戏页面')
  }

  preload(game) {}

  create(game) {
    this.createBackground()
    this.createKeyAndTips()
    this.createCover()
  }

  createBackground() {
    const { game } = this
    const worldWidth = game.world.width
    const worldHeight = game.world.height
    const bggameImg = game.add.image(0, 0, 'bggame')
    bggameImg.width = worldWidth
    bggameImg.height = worldHeight

    const lineGraphics = game.add.graphics(0, 0)
    for (let i = 0; i < 3; i++) {
      lineGraphics.lineStyle(1, 0xffffff)
      lineGraphics.moveTo((worldWidth * (i + 1)) / 4, 0)
      lineGraphics.lineTo((worldWidth * (i + 1)) / 4, worldHeight)
    }
  }

  createKeyAndTips() {
    const { game } = this
    const worldWidth = game.world.width
    const worldHeight = game.world.height

    // 开始按钮
    const beginGraphics = game.add.graphics()
    beginGraphics.beginFill(0x8156e0)
    beginGraphics.drawRect(0, 0, worldWidth / 4, standardHeight)

    const beginImg = game.add.image(
      0,
      worldHeight - standardHeight * 2,
      beginGraphics.generateTexture(),
    )

    const beginText = game.add.text(
      worldWidth / 8,
      standardHeight / 2,
      '开始',
      {
        fontSize: '40px',
        fill: '#fbc92e',
        align: 'center',
      },
    )
    beginText.anchor.set(0.5)
    beginImg.addChild(beginText)
    beginGraphics.destroy()

    // 钢琴键
    const keyArray = []
    const keyGroup = game.add.group()
    for (let i = 0; i < 3; i++) {
      let keyY = 0
      if (keyArray.length === 0) {
        keyY = beginImg.y - standardHeight
      } else {
        keyY = keyArray[keyArray.length - 1].y - standardHeight
      }

      const keyGraphics = game.add.graphics()
      keyGraphics.beginFill(0x036ed6)
      keyGraphics.drawRect(0, 0, worldWidth / 4, standardHeight)
      const keyImg = game.add.image(
        (worldWidth / 4) * (i + 1) + 1,
        keyY,
        keyGraphics.generateTexture(),
        null,
        keyGroup,
      )

      keyArray.push(keyImg)
      const keyText = game.add.text(worldWidth / 8, standardHeight / 2, 'A6', {
        fontSize: '40px',
        fill: '#fff',
        align: 'center',
      })
      keyText.anchor.set(0.5)
      keyImg.addChild(keyText)
      keyGraphics.destroy()
    }

    // 歌曲名
    const bgsongnameGroup = game.add.group()
    bgsongnameGroup.position.set(worldWidth / 2, 140)
    const bgsongnameImg = game.add.image(
      0,
      0,
      'bgsongname',
      null,
      bgsongnameGroup,
    )
    bgsongnameImg.anchor.set(0.5)
    bgsongnameImg.scale.set(1.75, 1.5)
    bgsongnameImg.alpha = 0.8

    const songnameText = game.add.text(
      0,
      0,
      '说好的幸福呢',
      {
        fontSize: 28,
        fill: '#fff',
        align: 'center',
      },
      bgsongnameGroup,
    )
    songnameText.anchor.set(0.5, 0.5)
    const numText = game.add.text(
      0,
      -bgsongnameImg.height / 2,
      '第一关',
      {
        fontSize: 28,
        fill: '#fbc92e',
        align: 'center',
      },
      bgsongnameGroup,
    )
    numText.anchor.set(0.5, 1)
  }

  createCover() {}
}
